<template>
  <div id="container"></div>
</template>

<script setup>
import { onBeforeMount, onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let props = defineProps(["transmitObj"])
let map = null;

onBeforeMount(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "2d76e7d7684c3596224871cadd2b3c9b",
  };
  AMapLoader.load({
    key: "186ca59d7756ca9423e2c2554d0cb916", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 17, // 初始化地图级别
        center: [106.595224,29.42207], // 初始化地图中心点位置
      });

      //#region 新加
      props.transmitObj.forEach((e) => {
        let marker = new AMap.Marker({
          position: new AMap.LngLat(e.longitude, e.latitude),
          offset: new AMap.Pixel(-13, -30),
          icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", //添加 icon 图标 URL
          title: e.name,
        });
        //信息窗体的内容
        var content = [
          `<div><b>${e.name}</b>`,
          `所属学校 : 重庆工程学院`,
          `所属学院 : ${e.academician.name}</div>`,
        ];
        //创建 infoWindow 实例
        let infoWindow = new AMap.InfoWindow({
          content: content.join("<br>"), //传入字符串拼接的 DOM 元素
          anchor: "bottom-left",
        });
        marker.on('click', function () {
          //打开信息窗体
          infoWindow.open(map, [e.longitude, e.latitude]); //map 为当前地图的实例，map.getCenter() 用于获取地图中心点坐标。
        })
        map.add(marker);


      })
      //#endregion
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<style scoped>
#container {
  width: 100%;
  height: 700px;
}
</style>